<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="#">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login">
                <div class="login">
                    <c:if test="${user.uName == null}">
                        <a href="${pageContext.request.contextPath}/login.jsp">登录</a>
                    </c:if>
                    <c:if test="${user.uName != null}">
                        欢迎光临：${user.uName}&nbsp;&nbsp;&nbsp;
                        <a href="${pageContext.request.contextPath}/users/del">注销</a>
                    </c:if>
                </div>
            </div>
            <div class="sp-cart"><a
                    href="${pageContext.request.contextPath}/shopcart.jsp">购物车</a><span><span>${shopCartList.size()}</span></span>
            </div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="#" title="母婴商城">
                    <img src="${pageContext.request.contextPath}/res/static/img/logo.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="" class="layui-form" novalidate>
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入需要的商品">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base shopcart-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="commodity.jsp" class="active">所有商品</a>
                    <a href="buytoday.html">今日团购</a>
                    <a href="information.html">母婴资讯</a>
                    <a href="about.html">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="banner-bg w1200">
        <h3>夏季清仓</h3>
        <p>宝宝被子、宝宝衣服3折起</p>
    </div>
    <form id="myform" action="#">
        <div class="cart w1200">
            <div class="cart-table-th">
                <div class="th th-chk">
                    <div class="select-all">
                        <%-- <div class="cart-checkbox">
                             <input class="check-all check check_ss" id="allCheckked" type="checkbox"
                                    value="true">
                         </div>--%>
                        <div class="cart-checkbox">
                            <input class="check-all check" id="allCheckked" type="checkbox" value="true">
                        </div>
                        <label>&nbsp;&nbsp;全选</label>
                    </div>
                </div>
                <div class="th th-item">
                    <div class="th-inner">
                        商品
                    </div>
                </div>
                <div class="th th-price">
                    <div class="th-inner">
                        单价
                    </div>
                </div>
                <div class="th th-amount">
                    <div class="th-inner">
                        数量
                    </div>
                </div>
                <div class="th th-sum">
                    <div class="th-inner">
                        小计
                    </div>
                </div>
                <div class="th th-op">
                    <div class="th-inner">
                        操作
                    </div>
                </div>
            </div>
            <div class="OrderList">

                <div class="order-content" id="list-cont">

                    <c:forEach items="${shopCartList}" var="shopCart">
                        <ul class="item-content layui-clear ul${shopCart.gid}">
                            <li class="th th-chk">
                                <div class="select-all">
                                        <%-- <div class="cart-checkbox">
                                             <input class="CheckBoxShop check check_ss${shopCart.gid}"
                                                    id="" type="checkbox"
                                                    num="all"
                                                    name="select-all"
                                                    lay-filter="allChoose" value="${shopCart.gid}">
                                         </div>--%>
                                    <div class="cart-checkbox">
                                        <input class="CheckBoxShop check" id="" type="checkbox" num="all"
                                               name="select-all" value="${shopCart.gid}">
                                    </div>
                                </div>
                            </li>
                            <li class="th th-item">
                                <div class="item-cont">
                                    <a href="javascript:;"><img
                                            src="${pageContext.request.contextPath}/${shopCart.gimg}"
                                            alt=""></a>
                                    <div class="text">
                                        <div class="title">${shopCart.gname}</div>
                                        <p><span>${shopCart.gcolour}</span></p>
                                    </div>
                                </div>
                            </li>
                            <li class="th th-price">
                                <span class="th-su price${shopCart.gid}">${shopCart.gprice}</span>
                            </li>
                            <li class="th th-amount">
                                <div class="box-btn layui-clear">
                                    <div class="less layui-btn " onclick="nus('${shopCart.gid}')">-
                                    </div>
                                    <input class="Quantity-input counts${shopCart.gid}" type="" name=""
                                           value="${shopCart.gnum}" disabled="disabled">
                                    <div class="add layui-btn " onclick="nub('${shopCart.gid}','${shopCart.kucun}')">+
                                    </div>
                                </div>
                            </li>
                            <li class="th th-sum">
                                <span class="sum gtotal${shopCart.gid}">${shopCart.gtotal}</span>
                            </li>
                            <li class="th th-op">
                                <span class="dele-btn del${shopCart.gid}" onclick="del('${shopCart.gid}')">删除</span>
                            </li>
                        </ul>
                    </c:forEach>


                </div>
            </div>

            <div class="FloatBarHolder layui-clear">
                <div class="th th-chk">
                    <div class="select-all">
                        <%--<div class="cart-checkbox">
                            <input class="check-all check check_ss" id="" name="select-all" type="checkbox" value="true">
                        </div>--%>
                        <div class="cart-checkbox">
                            <input class="check-all check" id="" name="select-all" type="checkbox" value="true">
                        </div>
                        <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
                    </div>
                </div>
                <div class="th batch-deletion">
                    <span class="batch-dele-btn"></span>
                </div>
                <button type="button" style="background-color: white;border: 0" id="deleteAll">
                    批量删除
                </button>

                <div class="th Settlement">
                    <button type="button" id="settlement" class="layui-btn">结算</button>

                </div>
                <div class="th total">
                    <p>应付：<span class="pieces-total">0</span></p>
                </div>
            </div>

        </div>
    </form>
    <script>


        // 加商品
        function nub(gid, kucun) {
            console.log($(".counts" + gid).val());
            let num = parseInt($(".counts" + gid).val()) + 1;
            console.log(num);
            if (num > kucun) {
                layer.msg('库存不足！')
            } else {

                let gprice = parseFloat($('.price' + gid).text());
                console.log(gprice);
                $.ajax(
                    {
                        type: "post",
                        url: '${pageContext.request.contextPath}' + "/shopcart/addOrUpdate",
                        dataType: "json",
                        data: "gid=" + gid + "&gnum=1",
                    })
                $(".counts" + gid).val(num);
                $('.gtotal' + gid).text(gprice * num);
            }





        }

        // 减商品
        function nus(gid) {

            let num = parseInt($(".counts" + gid).val()) - 1;
            console.log(num);
            if (num > 0) {
                let gprice = parseFloat($('.price' + gid).text());
                console.log(gprice);
                $.ajax(
                    {
                        type: "post",
                        url: "${pageContext.request.contextPath}/shopcart/addOrUpdate",
                        dataType: "json",
                        data: "gid=" + gid + "&gnum=-1",
                    })
                $(".counts" + gid).val(num);
                $('.gtotal' + gid).text(gprice * num);
            }
        }

        // 删除单个商品
        function del(gid) {
            $.ajax(
                {
                    type: "post",
                    url: "${pageContext.request.contextPath}/shopcart/delete",
                    dataType: "json",
                    data: "gid=" + gid,
                })
            $(".ul" + gid).remove();
        }


        layui.use('form', function () {
            var form = layui.form;
            var $ = layui.$;


            $("#deleteAll").click(function () {
                /*var newUrl = '







                ${pageContext.request.contextPath}' + "/shopcart/delAll";    //设置新提交地址
                    $("#myform").attr('action', newUrl);    //通过jquery为action属性赋值*/

                var checkeds = [];
                $('input[type=checkbox]:checked').each(function () {
                    checkeds.push($(this).val());
                });
                let checkedsId = [];
                let a = 0;
                if (!(checkeds.length === 0)) {
                    for (let i = 0; i < checkeds.length; i++) {
                        console.log(checkeds[i]);
                        if (!(checkeds[i] == "true")) {
                            checkedsId[a] = checkeds[i];
                            a++;
                        }
                    }
                }
                if (!(checkedsId.length === 0)) {
                    $.ajax({
                        type: "post",
                        url: "${pageContext.request.contextPath}/shopcart/delAll",
                        data: "checkeds=" + checkeds,
                        success: function (data) {
                            if (parseInt(data) === 1) {
                                // 刷新页面
                                location.reload();
                            }
                        }
                    })
                } else {
                    layer.msg('请勾选商品！');
                }


            })

            $("#settlement").click(function () {

                var checkeds = [];
                $('input[type=checkbox]:checked').each(function () {
                    checkeds.push($(this).val());
                });
                let checkedsId = [];
                let a = 0;
                if (!(checkeds.length === 0)) {
                    for (let i = 0; i < checkeds.length; i++) {
                        console.log(checkeds[i]);
                        if (!(checkeds[i] == "true")) {
                            checkedsId[a] = checkeds[i];
                            a++;
                        }
                    }
                }

                if (!(checkedsId.length === 0)) {

                    console.log(checkedsId);
                    window.location.href = '${pageContext.request.contextPath}' + "/order/addOrders?checkedsId=" + checkedsId;
                    /* var newUrl = '


                    ${pageContext.request.contextPath}' + "/order/addOrders";    //设置新提交地址
                    $("#myform").attr('action', newUrl);    //通过jquery为action属性赋值*/
                } else {
                    layer.msg('请选择商品！');
                }

            })


        })


        /*$(function () {

            $("#settlement").click(function () {

                var newUrl = '${pageContext.request.contextPath}' + "/order/addOrders";    //设置新提交地址
                $("#myform").attr('action', newUrl);    //通过jquery为action属性赋值



            })
        })*/
    </script>
</div>

<script type="text/javascript">
    layui.config({
        base: 'res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use(['mm', 'jquery', 'element', 'car'], function () {
        var mm = layui.mm, $ = layui.$, element = layui.element, car = layui.car;

        // 模版导入数据
        // var html = demo.innerHTML,
        // listCont = document.getElementById('list-cont');
        // mm.request({
        //   url: '../json/shopcart.json',
        //   success : function(res){
        //     listCont.innerHTML = mm.renderHtml(html,res)
        //     element.render();
        //     car.init()
        //   },
        //   error: function(res){
        //     console.log(res);
        //   }
        // })
        //
        car.init()


    });
</script>
</body>
</html>